<!--
  功能：表达式
  作者：whm
  版本：v1.0
-->
<template>
  <div class="expression-res">
    <strong style="width: 5%;">表达式:</strong>
    <span class="expression-content"> {{ expressionRes }}</span>
    <span class="evidence-filter-tips-edit" @click="editClick">
      <i class="el-icon-edit-outline" />
      编辑
    </span>
    <el-dialog
      title="编辑检索表达式"
      :visible.sync="dialogVisible"
      width="60%"
      center
      :before-close="handleClose"
    >
      <div>
        <div>
          <el-button type="primary" plain v-for="(item,idx) in arrbtn" :key="idx" @click="btnClick(item)">{{ item }}</el-button>
        </div>
        <div style="margin:10px 0">
          <el-input v-model="inputExpression" type="textarea" style="width:100%" @blur="handleInputBlur" />
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="sureBtn">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  // 局部注册的组件
  components: {},
  props: {
    expressionRes: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      dialogVisible: false, // 控制显示弹窗
      inputExpression: '', // 输入框内容
      blurIndex: 0, // 光标位置
      // 按钮显示东西
      // arrbtn: ['+', '-', '(', ')', 'and', ',', "'", '[', ']', '{', '}']
      arrbtn: ['+', '-', '(', ')', 'and', 'or', '<>']
    }
  },
  methods: {
    // 点击编辑
    editClick() {
      this.dialogVisible = true
      this.inputExpression = this.expressionRes
    },
    // 关闭弹窗
    handleClose() {
      this.dialogVisible = false
    },
    // 当前光标位置插入选择的东西
    insert_flg(str, flg, sn) {
      var newstr = ''
      var tmpa = ''
      for (var i = 0; i <= str.length; i++) {
        if (i === this.blurIndex) {
          var tmp = str.substring(0, i)
          tmpa = str.substring(i, str.length)
          newstr += tmp + flg
        }
      }
      return newstr + tmpa
    }, // 点击按钮选择特殊符号
    btnClick(val) {
      if (this.inputExpression === '') {
        // eslint-disable-next-line no-return-assign
        return this.inputExpression = val
      }
      this.inputExpression = this.insert_flg(this.inputExpression, val, this.blurIndex)
    }, // 输入框失去焦点
    handleInputBlur(e) {
      this.blurIndex = e.srcElement.selectionStart
    },
    // 点击确认按钮
    sureBtn() {
      console.log(this.inputExpression)
      this.$emit('expressionChange', { val: this.inputExpression, isShow: true })
      this.dialogVisible = false
    }
  }
}
</script>

<style scoped  lang="scss">
strong{
    width: 53px;
    font-size: 16px;
  }
.expression-res .legal-pane .el-input__inner{
    width: 100% !important;
      background: #fff !important;
}
.expression-res{

  strong{
    width: 7%;
  }
  display: flex;
  align-items: center;
  color: #2d54b8;
  background: #ebeef5;
  margin-left: 10px;
width: 100%;
.expression-content{
  width: 85%;
padding: 0 15px 0 5px;
}
    & > span:last-child {
      cursor: pointer;
    }
    .evidence-filter-tips-edit{
      float: right;
    color: #2d54b8;
    cursor: pointer;
    }

}

</style>
